import { AlipayOutlined, LockOutlined, MobileOutlined, TaobaoOutlined, UserOutlined, WeiboOutlined } from "@ant-design/icons";
import { LoginFormPage, ProConfigProvider, ProFormCaptcha, ProFormCheckbox, ProFormText } from "@ant-design/pro-components";
import { Button, Divider, Space, Tabs, message, theme } from "antd";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import useStore from "@/store";
import { loginApi } from "@/api/login";

import type { CSSProperties } from "react";
import type { TabsProps } from "antd";
import type { LoginType, LoginSubmitType } from "./types/index.type";

const iconStyles: CSSProperties = {
  color: "rgba(0, 0, 0, 0.2)",
  fontSize: "18px",
  verticalAlign: "middle",
  cursor: "pointer",
};
const tabItems: TabsProps["items"] = [
  { key: "account", label: "账号密码登录" },
  { key: "phone", label: "手机号登录" },
];

const Login = () => {
  const navigate = useNavigate();
  const [loginType, setLoginType] = useState<LoginType>("account");
  const { token } = theme.useToken();
  const setToken = useStore(state => state.setToken);
  const setUserInfo = useStore(state => state.setUserInfo);
  // * 提交表单且数据验证成功后回调事件
  const onFinish = async (value: LoginSubmitType) => {
    const { data } = await loginApi(value);
    const { token, ...rest } = data;
    setToken(token);
    setUserInfo(rest);
    navigate("/");
  };

  return (
    <div style={{ backgroundColor: "white", height: "100vh" }}>
      <LoginFormPage
        backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
        logo="/logo.jpeg"
        backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
        title="登录"
        containerStyle={{ backgroundColor: "rgba(0, 0, 0,0.65)", backdropFilter: "blur(4px)" }}
        activityConfig={{
          style: {
            boxShadow: "0px 0px 8px rgba(0, 0, 0, 0.2)",
            color: token.colorTextHeading,
            borderRadius: 8,
            backgroundColor: "rgba(255,255,255,0.25)",
            backdropFilter: "blur(4px)",
          },
          title: "胖虎yyds",
          subTitle: "本项目由胖虎独家赞助",
          action: (
            <Button size="large" style={{ borderRadius: 20, background: token.colorBgElevated, color: token.colorPrimary, width: 120 }}>
              去看看
            </Button>
          ),
        }}
        actions={
          <div style={{ display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column" }}>
            <Divider plain>
              <span style={{ color: token.colorTextPlaceholder, fontWeight: "normal", fontSize: 14 }}>其他登录方式</span>
            </Divider>
            <Space align="center" size={24}>
              <div
                style={{
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  flexDirection: "column",
                  height: 40,
                  width: 40,
                  border: "1px solid " + token.colorPrimaryBorder,
                  borderRadius: "50%",
                }}
              >
                <AlipayOutlined style={{ ...iconStyles, color: "#1677FF" }} />
              </div>
              <div
                style={{
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  flexDirection: "column",
                  height: 40,
                  width: 40,
                  border: "1px solid " + token.colorPrimaryBorder,
                  borderRadius: "50%",
                }}
              >
                <TaobaoOutlined style={{ ...iconStyles, color: "#FF6A10" }} />
              </div>
              <div
                style={{
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  flexDirection: "column",
                  height: 40,
                  width: 40,
                  border: "1px solid " + token.colorPrimaryBorder,
                  borderRadius: "50%",
                }}
              >
                <WeiboOutlined style={{ ...iconStyles, color: "#1890ff" }} />
              </div>
            </Space>
          </div>
        }
        onFinish={onFinish}
        initialValues={{ username: "panghu", password: "123456" }} // 初始值 捡个懒
      >
        <Tabs centered items={tabItems} activeKey={loginType} onChange={activeKey => setLoginType(activeKey as LoginType)} />
        {loginType === "account" && (
          <>
            <ProFormText
              name="username"
              fieldProps={{
                size: "large",
                prefix: <UserOutlined style={{ color: token.colorText }} className={"prefixIcon"} />,
              }}
              placeholder={"请输入账号"}
              rules={[{ required: true, message: "请输入账号!" }]}
            />
            <ProFormText.Password
              name="password"
              fieldProps={{
                size: "large",
                prefix: <LockOutlined style={{ color: token.colorText }} className={"prefixIcon"} />,
              }}
              placeholder={"请输入密码"}
              rules={[{ required: true, message: "请输入密码！" }]}
            />
          </>
        )}
        {loginType === "phone" && (
          <>
            <ProFormText
              fieldProps={{
                size: "large",
                prefix: <MobileOutlined style={{ color: token.colorText }} className={"prefixIcon"} />,
              }}
              name="mobile"
              placeholder={"请输入手机号"}
              rules={[
                { required: true, message: "请输入手机号！" },
                { pattern: /^1\d{10}$/, message: "手机号格式错误！" },
              ]}
            />
            <ProFormCaptcha
              fieldProps={{
                size: "large",
                prefix: <LockOutlined style={{ color: token.colorText }} className={"prefixIcon"} />,
              }}
              captchaProps={{
                size: "large",
              }}
              placeholder={"请输入验证码"}
              captchaTextRender={(timing, count) => {
                if (timing) return `${count}s ${"获取验证码"}`;
                return "获取验证码";
              }}
              name="captcha"
              rules={[{ required: true, message: "请输入验证码！" }]}
              onGetCaptcha={async () => {
                message.success("获取验证码成功！验证码为：1234");
              }}
            />
          </>
        )}
        <div style={{ marginBlockEnd: 24 }}>
          <ProFormCheckbox noStyle name="autoLogin">
            自动登录
          </ProFormCheckbox>
          <a href="javascript;" style={{ float: "right" }}>
            忘记密码
          </a>
        </div>
      </LoginFormPage>
    </div>
  );
};

const Page = () => {
  return (
    <ProConfigProvider dark>
      <Login />
    </ProConfigProvider>
  );
};
export default Page;
